<template>
  <div>
    <div style="height: 60px; line-height: 50px;border-bottom: 1px solid #ccc;display: flex">
      <div style="margin-top: 8.5px;margin-left: 5px">
        <a-input-search
            v-model:value="goodsName"
            placeholder="搜索商品关键词"
            enter-button
            @search="selectGoodss"
        />
      </div>
      <div style="margin-left: 5px">
        <el-select v-model="options.value"  placeholder="商品类别" @change="getGoodsByCategory">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </div>
      <div style="flex: 1;"></div>
      <div style="font-weight: bold;display: flex;text-align: center; align-items: center;padding-right: 30px">
        <a-button type="primary" @click="addGoods" style="margin-right: 30px">新增商品</a-button>
        <a-popconfirm
            title="确定删除吗？"
            ok-text="是"
            cancel-text="否"
            @confirm="confirm"

        >
        <a-button type="primary" danger >
          删除
        </a-button>
        </a-popconfirm>
      </div>
    </div>
    <div>
<!--      <a-table :dataSource="goods" :columns="columns" :customRow="handleCheck"-->
<!--               :rowSelection="{type:'radio',onChange:onSelectChange,selectedRowKeys}" rowKey="code"/>-->
      <a-table :rowSelection="{
        // selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
        getCheckboxProps:getCheckboxProps
      }"       :customRow="setRow"
               :columns="columns"
               :dataSource="goods"
                rowKey="code"
      >
        <template #name="{ record }">
          <a-button type="primary" ghost @click="hide(record)">详情</a-button>
        </template>

      </a-table>

    </div>
  </div>
</template>

<script>
import {StarOutlined, LikeOutlined, MessageOutlined} from '@ant-design/icons-vue';
import request from "@/utils/request";
import store from "@/store";
import {reactive, ref} from "vue";
import {DatePicker} from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';



export default {



  name: "GoodsDisplay",
  data() {
    return {
      goodsName:ref(''),
      goods: ref([]),
      codeList:ref([]),
      options:ref([]),

      columns: [
        {
          title: '编号',
          dataIndex: 'code',
          key: 'code',

        },
        {
          title: '商品名称',
          dataIndex: 'goodsName',
          key: 'goodsName',
        },
        {
          title: '库存',
          dataIndex: 'goodsInventory',
          key: 'goodsInventory',
          sorter: {
            compare: (a, b) => a.goodsInventory - b.goodsInventory,
            multiple: 2,
          },
        },
        {
          title: '价格',
          dataIndex: 'price',
          key: 'price',
          sorter: {
            compare: (a, b) => a.price - b.price,
            multiple: 1,
          },
        },
        {
          title: "",
          key: "detail",
          dataIndex: "detail",
          align: "center",
          slots: { customRender: "name" }
        }
      ],
    }
  },

  computed: {

    // checkBox属性设置
    getCheckboxProps (record) {
      return record => ({
        props: {
          defaultChecked: record.name === this.goods[0].goodsName
        }
      })
    }
  },

  mounted() {
    this.getGoodsAll()
    this.getOptions()


  },

  methods: {

    hide(record){
      request.get("http://localhost:8002/goods/"+record.code).then(res=>{
            store.commit("setData",res.data)
            store.commit("setImageUrl",res.data.url)
        console.log("goodsInfo:"+store.getters.getData)
        console.log(store.getters.getImageUrl)
            this.$router.push("/sms/goodsinfo")
            })
    },


    confirm(){
      this.deleteByCode()
    },



    selectGoodss(val){
      if (val===""||val===null)
        this.getGoodsAll()
      let goodss=[]
      this.goods.filter((item)=>{
        let reg= new RegExp(val,'i');
        if(reg.test(item.goodsName)){
          // console.log(item.goodsName)
          goodss.push(item)
        }
      });
      console.log(goodss)
      this.goods=goodss
    },

    // selectGoods(val){
    //   if (val===null){
    //     val=""
    //   }
    //
    //   request.get("http://localhost:8002/goods/name/"+val).then(res=>{
    //     console.log(res)
    //     store.commit("setData",res.data)
    //     this.getGoods()
    //   })
    // },


    getGoodsByCategory(val){
      console.log(val)
      if (val===8848){
        this.getGoodsAll()
      }
      else
      request.get("http://localhost:8002/goods/category/"+val).then(res=>{
        store.commit("setData",res.data)
        console.log(res)
        this.getGoods()
      })
    },

    getOptions() {
      request.get("http://localhost:8002/goods/category").then(res => {
        let optionss = []
        console.log(res.data)
        optionss.push({value:8848,label:"全部"})
        for (let item in res.data) {
          optionss.push({value: res.data[item].categoryId, label: res.data[item].categoryName})
        }

        console.log(optionss)
        store.commit('setLocalData', optionss)
        // console.log(store.getters.getlocalData)
        this.options = store.getters.getlocalData
      })
    },
    addGoods(){
      store.commit("setData",[])
      store.commit("setImageUrl","")
      this.$router.push("/sms/input")
    },

    deleteByCode(){
      console.log(this.codeList)
      if(this.codeList!==[]){
        request.post("http://localhost:8002/goods/delete",this.codeList).then(ref=>{
          console.log(ref)
          this.getGoodsAll()
        })
      }
    },

    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.codeList=selectedRowKeys;
    },

    setRow (record) {
      return {
        on: {
          click: () => {
            let rowKeys = this.selectedRowKeys;
            if (rowKeys.length > 0 && rowKeys.includes(record.key)) {
              rowKeys.splice(rowKeys.indexOf(record.key), 1);
            } else {
              rowKeys.push(record.key);
            }
            this.selectedRowKeys = rowKeys;
            console.log(this.selectedRowKeys)
          }
        }
      };
    },



    getGoodsAll() {
      request.get("http://localhost:8002/goods/all").then(res => {
        store.commit("setData", res.data)
        console.log(res)
        this.getGoods()
      })


    },

    getGoods() {
      let data = store.getters.getData
      let key = 1
      let goodss = []
      for (let i in data) {
        goodss.push({
          key: key,
          code: data[i].code,
          goodsName: data[i].goodsName,
          goodsInventory: data[i].goodsInventory,
          price: data[i].price
        })
        key++
      }
      console.log(goodss)
      this.goods = goodss
    },
  }


}


</script>

